<template>
  <a-layout class="layout-merchant">
    <!-- 顶部导航栏 -->
    <a-layout-header class="layout-header">
      <div class="header-left">
        <div class="logo">
          <img src="@/assets/logo.png" />
          <div class="logo-text">
            {{
              isHotelMerchant ? "贵港文旅+酒店商家后台" : "贵港文旅+商家后台"
            }}
          </div>
        </div>
        <a-divider direction="vertical" margin="0" />
        <a-button class="trigger-btn" type="outline" @click="handleCollapse">
          <template #icon>
            <icon-menu-fold v-if="collapsed" />
            <icon-menu-unfold v-else />
          </template>
        </a-button>
        <a-breadcrumb>
          <a-breadcrumb-item
            @click="router.push(isHotelMerchant ? '/hotel-admin' : '/merchant')"
          >
            {{ isHotelMerchant ? "酒店商家后台" : "商家后台" }}
          </a-breadcrumb-item>
          <template v-for="(item, index) in breadcrumbItems" :key="index">
            <a-breadcrumb-item
              :class="{ 'breadcrumb-link': item.path }"
              @click="item.path && router.push(item.path)"
            >
              {{ item.title }}
            </a-breadcrumb-item>
          </template>
        </a-breadcrumb>
      </div>
      <div class="header-right">
        <a-space :size="16">
          <a-tooltip content="全屏">
            <a-button
              class="nav-btn"
              type="outline"
              shape="circle"
              @click="toggleFullscreen"
            >
              <template #icon>
                <icon-fullscreen-exit v-if="isFullscreen" />
                <icon-fullscreen v-else />
              </template>
            </a-button>
          </a-tooltip>
          <a-tooltip :content="isDark ? '切换到亮色模式' : '切换到暗色模式'">
            <a-button
              class="nav-btn"
              type="outline"
              shape="circle"
              @click="toggleTheme"
            >
              <template #icon>
                <icon-moon-fill v-if="isDark" />
                <icon-sun-fill v-else />
              </template>
            </a-button>
          </a-tooltip>
          <a-tooltip content="消息中心">
            <div class="message-box">
              <a-badge :count="unreadMessageCount" dot>
                <a-button
                  class="nav-btn"
                  type="outline"
                  shape="circle"
                  @click="handleNotificationClick"
                >
                  <template #icon>
                    <icon-notification />
                  </template>
                </a-button>
              </a-badge>
            </div>
          </a-tooltip>
          <a-dropdown trigger="click" position="br">
            <div class="user-dropdown">
              <a-avatar :size="32" :src="merchantInfo.avatar" />
              <span class="username" v-show="!collapsed">{{
                merchantInfo.name
              }}</span>
            </div>
            <template #content>
              <a-doption
                class="dropdown-item"
                @click="
                  router.push(
                    isHotelMerchant
                      ? '/hotel-admin/profile'
                      : '/merchant/profile',
                  )
                "
              >
                <template #icon><icon-user /></template>
                个人信息
              </a-doption>
              <a-doption
                class="dropdown-item"
                @click="
                  router.push(
                    isHotelMerchant
                      ? '/hotel-admin/settings'
                      : '/merchant/settings',
                  )
                "
              >
                <template #icon><icon-settings /></template>
                账号设置
              </a-doption>
              <a-divider style="margin: 4px 0" />
              <a-doption class="dropdown-item" @click="handleLogout">
                <template #icon><icon-export /></template>
                退出登录
              </a-doption>
            </template>
          </a-dropdown>
        </a-space>
      </div>
    </a-layout-header>

    <!-- 主要内容区域 -->
    <a-layout class="main-container">
      <!-- 左侧导航栏 -->
      <a-layout-sider
        :collapsed="collapsed"
        :collapsible="true"
        :trigger="null"
        :width="220"
        :collapsed-width="64"
        breakpoint="xl"
        class="layout-sider"
        @collapse="handleCollapse"
      >
        <a-menu
          :default-selected-keys="[selectedMenuKey]"
          :selected-keys="[selectedMenuKey]"
          :style="{ width: '100%' }"
          :collapsed="collapsed"
          :show-collapse-button="false"
          accordion
          @menuItemClick="handleMenuClick"
        >
          <!-- 酒店商家菜单 -->
          <template v-if="isHotelMerchant">
            <a-menu-item key="HotelAdminDashboard">
              <template #icon><icon-dashboard /></template>
              控制台
            </a-menu-item>
            <a-menu-item key="HotelInfo">
              <template #icon><icon-home /></template>
              酒店信息
            </a-menu-item>
            <a-menu-item key="RoomManagement">
              <template #icon><icon-apps /></template>
              房间管理
            </a-menu-item>
            <a-menu-item key="RoomStatus">
              <template #icon><icon-calendar /></template>
              房态管理
            </a-menu-item>
            <a-menu-item key="BookingManagement">
              <template #icon><icon-book /></template>
              订单管理
            </a-menu-item>
            <a-menu-item key="CustomerManagement">
              <template #icon><icon-user-group /></template>
              客户管理
            </a-menu-item>
            <a-menu-item key="ReviewManagement">
              <template #icon><icon-message /></template>
              评价管理
            </a-menu-item>
            <a-menu-item key="HotelFinance">
              <template #icon><icon-list /></template>
              财务管理
            </a-menu-item>
            <a-menu-item key="PromotionManagement">
              <template #icon><icon-fire /></template>
              促销活动
            </a-menu-item>
            <a-menu-item key="HotelStoreSettings">
              <template #icon><icon-settings /></template>
              店铺设置
            </a-menu-item>
            <a-divider style="margin: 8px 0" />
            <a-menu-item key="HotelAdminProfile">
              <template #icon><icon-user /></template>
              个人信息
            </a-menu-item>
            <a-menu-item key="HotelAdminNotification">
              <template #icon><icon-notification /></template>
              消息中心
            </a-menu-item>
            <a-menu-item key="HotelAdminSettings">
              <template #icon><icon-settings /></template>
              账号设置
            </a-menu-item>
          </template>

          <!-- 文创商家菜单 -->
          <template v-else>
            <a-menu-item key="MerchantDashboard">
              <template #icon><icon-dashboard /></template>
              数据概览
            </a-menu-item>
            <a-sub-menu key="orders">
              <template #icon><icon-ordered-list /></template>
              <template #title>订单管理</template>
              <a-menu-item key="MerchantOrders">全部订单</a-menu-item>
              <a-menu-item key="MerchantOrderDelivery">发货管理</a-menu-item>
              <a-menu-item key="MerchantOrderRefund">退款管理</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="products">
              <template #icon><icon-gift /></template>
              <template #title>商品管理</template>
              <a-menu-item key="MerchantProducts">商品列表</a-menu-item>
              <a-menu-item key="MerchantProductCreate">新增商品</a-menu-item>
              <a-menu-item key="MerchantProductInventory">库存管理</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="comments">
              <template #icon><icon-message /></template>
              <template #title>评价管理</template>
              <a-menu-item key="MerchantComments">全部评价</a-menu-item>
              <a-menu-item key="MerchantCommentsAnalysis">评分分析</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="marketing">
              <template #icon><icon-fire /></template>
              <template #title>营销管理</template>
              <a-menu-item key="MerchantPromotions">促销活动</a-menu-item>
              <a-menu-item key="MerchantFlashSale">限时特惠</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="finance">
              <template #icon><icon-list /></template>
              <template #title>财务管理</template>
              <a-menu-item key="MerchantFinance">收支明细</a-menu-item>
              <a-menu-item key="MerchantWithdraw">提现管理</a-menu-item>
              <a-menu-item key="MerchantBill">对账单</a-menu-item>
            </a-sub-menu>
            <a-sub-menu key="settings">
              <template #icon><icon-settings /></template>
              <template #title>店铺设置</template>
              <a-menu-item key="MerchantSettingsBasic">基本信息</a-menu-item>
              <a-menu-item key="MerchantSettingsSecurity">安全设置</a-menu-item>
              <a-menu-item key="MerchantSettingsNotification"
                >通知设置</a-menu-item
              >
              <a-menu-item key="MerchantSettingsPayment">支付设置</a-menu-item>
              <a-menu-item key="MerchantSettingsStore">店铺设置</a-menu-item>
            </a-sub-menu>

            <!-- 个人设置 -->
            <a-divider style="margin: 8px 0" />
            <a-menu-item key="MerchantProfile">
              <template #icon><icon-user /></template>
              个人信息
            </a-menu-item>
            <a-menu-item key="MerchantNotification">
              <template #icon><icon-notification /></template>
              消息中心
            </a-menu-item>
            <a-menu-item key="MerchantAccountSettings">
              <template #icon><icon-settings /></template>
              账号设置
            </a-menu-item>
          </template>
        </a-menu>
      </a-layout-sider>

      <!-- 右侧内容区域 -->
      <a-layout-content class="layout-content">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup>
import {
  ref,
  computed,
  nextTick,
  onMounted,
  onBeforeUnmount,
  watch,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import { useUserStore } from "@/stores/user";
import { useThemeStore } from "@/stores/theme";
import { Message } from "@arco-design/web-vue";
import {
  IconMenuFold,
  IconMenuUnfold,
  IconDashboard,
  IconShoppingCart,
  IconGift,
  IconMessage,
  IconFire,
  IconMoney,
  IconSettings,
  IconUser,
  IconExport,
  IconFullscreen,
  IconFullscreenExit,
  IconMoonFill,
  IconSunFill,
  IconNotification,
  IconDown,
  IconPlusCircle,
  IconPauseCircle,
  IconPlayCircle,
  IconDelete,
  IconOrderedList,
  IconWallet,
  IconBank,
  IconHome,
  IconCalendar,
  IconUserGroup,
  IconStar,
  IconStore,
  IconApps,
  IconBook,
  IconList,
} from "@arco-design/web-vue/es/icon";

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const themeStore = useThemeStore();
const collapsed = ref(false);
const isFullscreen = ref(false);
const isMobile = ref(false);

// 商家信息
const merchantInfo = computed(() => ({
  avatar: userStore.avatar || "/default-avatar.png",
  name: userStore.username || "未知用户",
}));

// 监听主题变化
watch(
  () => themeStore.theme,
  (newTheme) => {
    // 只在商家后台页面时更新 Arco Design 主题
    if (document.body.hasAttribute("arco-theme")) {
      document.body.setAttribute("arco-theme", newTheme);
    }
  },
);

const selectedMenuKey = computed(() => {
  if (route.name === "MerchantSettings" && route.query.tab) {
    const tabToMenuKey = {
      basic: "MerchantSettingsBasic",
      store: "MerchantSettingsStore",
      security: "MerchantSettingsSecurity",
      notification: "MerchantSettingsNotification",
      payment: "MerchantSettingsPayment",
    };
    return tabToMenuKey[route.query.tab] || "MerchantSettingsBasic";
  }
  return route.name;
});

const handleCollapse = () => {
  collapsed.value = !collapsed.value;
  nextTick(() => {
    window.dispatchEvent(new Event("resize"));
  });
};

const handleMenuClick = (key) => {
  // 处理设置页面的路由跳转
  if (key === "MerchantSettingsBasic") {
    router.push("/merchant/settings");
  } else if (key === "MerchantSettingsSecurity") {
    router.push("/merchant/settings/security");
  } else if (key === "MerchantSettingsNotification") {
    router.push("/merchant/settings/notification");
  } else if (key === "MerchantSettingsPayment") {
    router.push("/merchant/settings/payment");
  } else if (key === "MerchantSettingsStore") {
    router.push("/merchant/settings/store");
  } else if (key === "MerchantProfile") {
    router.push("/merchant/account/profile");
  } else if (key === "MerchantAccountSettings") {
    router.push("/merchant/account/settings");
  } else if (key === "MerchantNotification") {
    router.push("/merchant/notification");
  } else if (key === "HotelAdminNotification") {
    router.push("/hotel-admin/notification");
  } else {
    // 处理其他菜单项的路由跳转
    router.push({ name: key });
  }

  if (isMobile.value) {
    collapsed.value = true;
  }
};

const handleLogout = async () => {
  try {
    await userStore.logout();
    Message.success("退出成功");
    router.push("/login");
  } catch (error) {
    Message.error("退出失败");
  }
};

const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
    isFullscreen.value = true;
  } else {
    document.exitFullscreen();
    isFullscreen.value = false;
  }
};

const toggleTheme = () => {
  themeStore.toggleTheme();
};

const handleResize = () => {
  const width = window.innerWidth;
  isMobile.value = width < 768;
  if (isMobile.value) {
    collapsed.value = true;
  }
};

// 处理消息中心按钮点击
const handleNotificationClick = () => {
  if (isHotelMerchant.value) {
    router.push("/hotel-admin/notification");
  } else {
    router.push("/merchant/notification");
  }
};

// 未读消息数量
const unreadMessageCount = ref(0);

const isDark = computed(() => themeStore.isDark);
const isHotelMerchant = computed(() => userStore.isHotelMerchant);

const breadcrumbItems = computed(() => {
  const items = [];
  let currentRoute = route;
  const basePath = isHotelMerchant.value ? "/hotel-admin" : "/merchant";

  while (
    currentRoute &&
    currentRoute.matched &&
    currentRoute.matched.length > 0
  ) {
    if (currentRoute.meta?.title && currentRoute.path !== basePath) {
      // 处理设置页面的特殊情况
      if (currentRoute.name === "MerchantSettings" && route.query.tab) {
        const tabTitles = {
          basic: "基本信息",
          store: "店铺设置",
          security: "安全设置",
          notification: "通知设置",
          payment: "支付设置",
        };
        items.unshift({
          title: tabTitles[route.query.tab] || "基本信息",
          path: currentRoute.path,
        });
      } else {
        items.unshift({
          title: currentRoute.meta.title,
          path: currentRoute.path,
        });
      }
    }
    // 安全地获取父级路由
    const parentIndex = currentRoute.matched.length - 2;
    currentRoute = parentIndex >= 0 ? currentRoute.matched[parentIndex] : null;
  }

  return items;
});

onMounted(() => {
  window.addEventListener("resize", handleResize);
  handleResize();

  // 在商家后台页面挂载时设置 Arco Design 主题
  document.body.setAttribute("arco-theme", themeStore.theme);

  // 获取未读消息数量
  fetchUnreadMessageCount();
});

// 获取未读消息数量
const fetchUnreadMessageCount = async () => {
  try {
    // TODO: 这里应该是调用API获取未读消息数量
    // 暂时使用模拟数据
    unreadMessageCount.value = Math.floor(Math.random() * 10); // 模拟0-9条未读消息
  } catch (error) {
    console.error("获取未读消息数量失败:", error);
  }
};

onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);

  // 在商家后台页面卸载时移除 Arco Design 主题属性
  document.body.removeAttribute("arco-theme");
});
</script>

<style lang="less" scoped>
.layout-merchant {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-1);
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;

  :deep([arco-theme="dark"]) {
    .layout-header {
      background: var(--color-bg-2);
      border-bottom-color: var(--color-neutral-4);

      .logo-text {
        color: rgba(255, 255, 255, 0.9);
      }

      .trigger-btn {
        color: rgba(255, 255, 255, 0.7);

        &:hover {
          color: #fff;
          background-color: rgba(255, 255, 255, 0.1);
        }
      }

      .nav-btn {
        color: rgba(255, 255, 255, 0.7);

        &:hover {
          color: #fff;
          background-color: rgba(255, 255, 255, 0.1);
        }
      }

      .username {
        color: rgba(255, 255, 255, 0.9);
      }

      .message-box {
        .arco-badge-dot {
          background-color: rgb(var(--primary-6));
        }
      }

      .arco-dropdown-trigger:hover {
        .username {
          color: #fff;
        }
        .arco-icon {
          color: #fff;
        }
      }
    }

    .layout-sider {
      background: var(--color-bg-2);
      border-right-color: var(--color-neutral-4);

      :deep(.arco-menu) {
        background: transparent;

        .arco-menu-item,
        .arco-menu-inline-header {
          color: rgba(255, 255, 255, 0.7);

          &:hover {
            color: #fff;
            background-color: rgba(255, 255, 255, 0.1);
          }

          &.arco-menu-selected {
            color: #fff;
            background-color: rgb(var(--primary-6));

            .arco-icon {
              color: #fff;
            }

            &:hover {
              background-color: rgb(var(--primary-5));
            }
          }

          .arco-icon {
            color: rgba(255, 255, 255, 0.7);
          }
        }

        .arco-menu-inline-content {
          background-color: rgba(0, 0, 0, 0.2);

          .arco-menu-item {
            &:hover {
              background-color: rgba(255, 255, 255, 0.1);
            }

            &.arco-menu-selected {
              background-color: rgb(var(--primary-6));
            }
          }
        }
      }

      &::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.2);

        &:hover {
          background-color: rgba(255, 255, 255, 0.3);
        }
      }
    }

    .layout-content {
      background: var(--color-bg-1);
    }

    :deep(.arco-breadcrumb) {
      .arco-breadcrumb-item {
        color: rgba(255, 255, 255, 0.7);

        &:last-child {
          color: rgba(255, 255, 255, 0.9);
        }

        &:hover {
          color: #fff;
        }
      }
    }

    :deep(.arco-divider) {
      border-left-color: rgba(255, 255, 255, 0.15);
    }

    :deep(.arco-dropdown-menu) {
      background-color: var(--color-bg-2);
      border-color: var(--color-neutral-4);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

      .arco-dropdown-option {
        color: rgba(255, 255, 255, 0.7);

        &:hover {
          color: #fff;
          background-color: rgba(255, 255, 255, 0.1);
        }

        .arco-icon {
          color: rgba(255, 255, 255, 0.7);
        }
      }
    }
  }
}

.layout-header {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--color-bg-2);
  border-bottom: 1px solid var(--color-border);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  .header-left {
    display: flex;
    align-items: center;

    .logo {
      display: flex;
      align-items: center;
      margin-right: 16px;

      img {
        width: 32px;
        height: 32px;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        &:hover {
          transform: scale(1.1);
        }
      }

      .logo-text {
        margin-left: 12px;
        font-size: 18px;
        font-weight: 500;
        color: var(--color-text-1);
        white-space: nowrap;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
    }

    .trigger-btn {
      margin: 0 16px;
      color: var(--color-text-2);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

      &:hover {
        color: rgb(var(--primary-6));
        background-color: var(--color-fill-2);
        transform: rotate(180deg);
      }
    }
  }

  .header-right {
    display: flex;
    align-items: center;

    .nav-btn {
      color: var(--color-text-2);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

      &:hover {
        color: rgb(var(--primary-6));
        background-color: var(--color-fill-2);
        transform: scale(1.1);
      }
    }

    .message-box {
      display: flex;
      align-items: center;

      .arco-badge-dot {
        box-shadow: 0 0 0 2px var(--color-bg-2);
        animation: pulse 2s infinite;
      }
    }

    .username {
      font-size: 14px;
      color: var(--color-text-1);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .arco-dropdown-trigger {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

      &:hover {
        .username {
          color: rgb(var(--primary-6));
        }
        .arco-icon {
          color: rgb(var(--primary-6));
          transform: rotate(180deg);
        }
      }
    }
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  70% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
}

.main-container {
  flex: 1;
  display: flex;
  background-color: var(--color-bg-1);
  transition: background-color 0.2s;
  margin-top: 60px;
  height: calc(100vh - 60px);
}

.layout-sider {
  position: fixed;
  top: 60px;
  left: 0;
  height: calc(100vh - 60px);
  background: var(--color-bg-2);
  border-right: 1px solid var(--color-border);
  transition: all 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
  overflow-y: hidden;
  z-index: 999;

  &::-webkit-scrollbar {
    display: none;
  }

  :deep(.arco-menu) {
    padding: 8px;
    background: transparent;
    border-right: none;
    height: 100%;
    overflow: hidden;

    .arco-menu-inner {
      padding: 4px 0;
    }

    .arco-menu-item {
      margin-bottom: 4px;
      border-radius: 4px;
      color: var(--color-text-2);
      height: 40px;
      line-height: 40px;
      transition: all 0.2s ease-in-out;

      .arco-icon {
        font-size: 18px;
        vertical-align: middle;
      }

      &:hover {
        color: rgb(var(--primary-6));
        background-color: var(--color-fill-2);
      }

      &.arco-menu-selected {
        color: rgb(var(--primary-6));
        font-weight: 500;
        background-color: var(--color-primary-light-1);

        .arco-icon {
          color: rgb(var(--primary-6));
        }

        &:hover {
          background-color: var(--color-primary-light-2);
        }
      }

      .arco-icon {
        color: var(--color-text-2);
        transition: color 0.2s;
      }
    }

    .arco-menu-inline-header {
      height: 40px;
      line-height: 40px;
      border-radius: 4px;
      transition: all 0.2s ease-in-out;

      &:hover {
        color: rgb(var(--primary-6));
        background-color: var(--color-fill-2);
      }

      &.arco-menu-selected {
        color: rgb(var(--primary-6));
        background-color: var(--color-primary-light-1);

        .arco-icon {
          color: rgb(var(--primary-6));
        }
      }
    }

    .arco-menu-inline {
      .arco-menu-inline-content {
        padding-left: 8px;
      }

      .arco-menu-item {
        padding-left: 40px !important;
        margin-left: 0;
        border-radius: 4px;
      }
    }

    .arco-menu-collapse-button {
      border-radius: 2px;
      margin: 8px;
      color: var(--color-text-2);

      &:hover {
        color: rgb(var(--primary-6));
        background-color: var(--color-fill-2);
      }
    }

    &.arco-menu-collapse {
      .arco-menu-item,
      .arco-menu-inline-header {
        padding-left: 20px !important;
        text-overflow: clip;
      }

      .arco-menu-inline-content {
        display: none;
      }

      .arco-icon {
        margin-right: 20px;
        font-size: 18px;
      }
    }
  }

  &[arco-theme="dark"] {
    :deep(.arco-menu) {
      .arco-menu-item,
      .arco-menu-inline-header {
        color: rgba(255, 255, 255, 0.7);

        &:hover {
          color: #fff;
          background-color: var(--color-fill-3);
        }

        &.arco-menu-selected {
          color: #fff;
          background-color: rgb(var(--primary-6));

          .arco-icon {
            color: #fff;
          }

          &:hover {
            background-color: rgb(var(--primary-5));
          }
        }

        .arco-icon {
          color: rgba(255, 255, 255, 0.7);
        }
      }
    }
  }
}

.layout-content {
  flex: 1;
  padding: 16px;
  background: var(--color-bg-1);
  margin-left: 220px;
  min-height: calc(100vh - 60px);
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
  overflow-y: auto;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

:deep(.arco-breadcrumb) {
  font-size: 14px;

  .arco-breadcrumb-item {
    color: var(--color-text-2);
    transition: color 0.2s;

    &:last-child {
      color: var(--color-text-1);
    }

    &:hover {
      color: rgb(var(--primary-6));
    }
  }
}

:deep(.arco-divider) {
  margin: 0 8px;
  height: 16px;
  border-left-color: var(--color-border);
}

@media screen and (max-width: 768px) {
  .layout-sider {
    transform: translateX(-100%);
  }

  .layout-sider.arco-layout-sider-collapsed {
    transform: translateX(-100%);
  }

  .layout-content {
    margin-left: 0;
  }
}

.merchant-layout {
  min-height: 100vh;
  display: flex;

  .layout-sider {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    height: 100vh;
    background-color: var(--color-bg-2);
    transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
  }

  .layout-content {
    flex: 1;
    margin-left: 220px;
    min-height: 100vh;
    transition: margin-left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);

    &.collapsed {
      margin-left: 48px;
    }
  }

  .layout-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 220px;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 16px;
    background-color: var(--color-bg-2);
    border-bottom: 1px solid var(--color-border);
    transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);

    .collapsed & {
      left: 48px;
    }
  }

  .layout-navbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
  }

  .main-content {
    margin-top: 60px;
    padding: 16px;
    min-height: calc(100vh - 60px);
    box-sizing: border-box;
    background-color: var(--color-bg-1);
  }
}

@media screen and (max-width: 768px) {
  .merchant-layout {
    .layout-sider {
      transform: translateX(-100%);

      &.show {
        transform: translateX(0);
      }
    }

    .layout-content {
      margin-left: 0;
    }

    .layout-header {
      left: 0;
    }
  }
}

/* 当侧边栏折叠时调整内容区域的边距 */
.layout-sider.arco-layout-sider-collapsed + .layout-content {
  margin-left: 64px;
}

:deep(.arco-breadcrumb) {
  .breadcrumb-link {
    cursor: pointer;

    &:hover {
      color: rgb(var(--primary-6));
    }
  }

  .arco-breadcrumb-item {
    &:last-child {
      cursor: default;

      &:hover {
        color: var(--color-text-1);
      }
    }
  }
}
</style>
